import React, { Dispatch, SetStateAction } from "react";
import { CheckboxLabel } from "./checkbox";

export type CheckboxGroupValue = Array<CheckboxLabel>

export type CheckboxGroupSetValue = Dispatch<SetStateAction<CheckboxGroupValue>>

export interface CheckboxGroupProps {
    value: CheckboxGroupValue
    children: React.ReactNode
    setValue: CheckboxGroupSetValue
}

export const UseCheckboxGroupContext = React.createContext<{ checkboxGroupValue: CheckboxGroupValue | null, setGroupValue: CheckboxGroupSetValue | null }>({ checkboxGroupValue: null, setGroupValue: null });

const CheckboxGroup: React.FC<CheckboxGroupProps> = (props) => {

    const { children, value, setValue } = props;

    return <div className={'yulang-checkbox-group-container'}>
        <UseCheckboxGroupContext.Provider value={{ checkboxGroupValue: value, setGroupValue: setValue }}>
            {children}
        </UseCheckboxGroupContext.Provider>
    </div >
}

export default CheckboxGroup;